<template>
  <div class="common-menu">
    <div class="menu-wrap">
      <el-menu :default-active="onRoutes" 
      class="el-menu" 
      mode="horizontal" 
      :ellipsis="false" 
      background-color="#edf6ee" 
      active-text-color="#38603b" 
      router>
      <!--:default-active="activeIndex"-->
        <el-menu-item
          v-for="item in menu"
          :index="item.path"
          :key="item.path"
          @click="handleMenuClick(item)"

          class="custom-menu-item"
        >
          <template v-slot:title>
            <span>{{ item.lable }}</span>
          </template>
        </el-menu-item>
        <div class="menu-right">
          <el-button type="success" @click="clickSelect">我的志愿表</el-button>
          <div class="user-avator">
            <el-icon><Avatar /></el-icon>
          </div>
          <el-dropdown
            class="user-name"
            trigger="click"
            @command="handleCommand"
          >
            <div class="el-dropdown-link">
              <span><b>{{ userData.name }}</b><el-icon><CaretBottom /></el-icon></span>
            </div>
            
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-menu>
    </div>
  </div>
</template>
<style scoped>
b {
    color: #38603b;
}
.custom-menu-item {
  color: #548757;
  font-size: 15px; /* 设置字体大小 */
  font-weight: bold;
}
.custom-menu-item:hover span {
  color: #7fa882;
  
}

.el-menu{
  border:#7fa882;
}

.el-button{
  background-color: #548757; /* 设置按钮的背景色 */
  color: white; /* 设置按钮的文本颜色 */
  border: none; /* 设置按钮的边框样式 */
  border-radius: 15px; /* 设置按钮的圆角 */
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.271); /* 设置按钮的阴影效果 */
  font-size: 14px; /* 设置按钮的字体大小 */
  padding: 10px 16px; /* 设置按钮的内边距*/
}
.common-menu {
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu-wrap {
  flex-grow: 3;
}
.button-wrap {
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
  margin-left: auto;
  padding-right: 20px;
}
.user-avator {
  margin-left: 20px;
}
.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.user-name {
  margin-left: 10px;
  /*vertical-align: middle;*/
}
.el-dropdown-link {
    color: #000;
    cursor: pointer;
    vertical-align: middle;
}
.menu-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
  margin-left: auto;
  padding-right: 20px;
}
</style>

<script>
import { useRoute,useRouter } from "vue-router";
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  setup() {
    const router = useRouter();
    const routeData = useRoute();

    const activeIndex = computed(() => {
      return routeData.path;
    });

    const menu = [
      {
        path: "/home/school",
        name: "school",
        lable: "高校信息查询",
        icon: "s-home",
        url: "/home/school",
      },
      {
        path: "/home/special",
        name: "special",
        lable: "专业信息查询",
        icon: "video-play",
        url: "/home/special",
      },
      {
        path: "/home/recommend",
        name: "recommend",
        lable: "个性化志愿推荐",
        icon: "user",
        url: "/home/recommend",
      },
      {
        path: "/home/bigData",
        name: "bigData",
        lable: "数据可视化",
        icon: "big-data",
      },

    ];
    const handleMenuClick = (item) => {
      if (item.path === "/home/bigData") {
        window.open("http://localhost:8999", "_blank");
      } else {
        router.push({ path: item.path });
      }
    };

    //const router = useRouter();
    const clickMenu = () => {
      // router.push({
      //   path: '/home/' + item.name,
      // });
    };
    const route = useRoute();
    const onRoutes = computed(() => {
        return route.path;
    });
    //const store = useStore();
    const userData = {
      name: localStorage.getItem("ms_username"),
      balance: 20,
    };
   
    const handleCommand = (command) => {
        if (command == "loginout") {
            localStorage.removeItem("ms_username");
            router.push("/login");
        }
    };
    const store = useStore();
    const clickSelect = () => {
      store.commit("showSelectDialog");
    };
    return {
      menu,
      activeIndex,
      handleMenuClick,
      clickMenu,
      userData,
      onRoutes,
      handleCommand,
      clickSelect
    };
  },
};
</script>